/* 
 在Vue中，我们基于<template>（或者JSX）语法构建视图；当页面刷新或状态更改后，我们需要对视图进行编译「compiler」;
  第一次渲染：
    @1 把视图编译为虚拟DOM对象
      + 虚拟DOM对象：是vue内部自己创建的一个对象，对象中描述了DOM节点的相关特征「vnode」
    @2 把虚拟DOM对象转换为真实的DOM
      + 真实DOM：基于createElement等方法创建的DOM对象，最后插入到页面中进行渲染
      + 把这一次的“虚拟DOM对象”存储起来「oldVNode」
  当状态更新，视图也要跟着更新：
    @1 按照最新的数据，重新生成新的vNode
    @2 拿最新的vNode和上一次存储起来的oldVNode做对比「虚拟DOM对比：DOM-DIFF」
      + 有自己的算法（dom-diff算法）
      + 找到两次之间不同的部分「生成补丁包」
    @3 只把补丁包转换为真实的DOM，其余的不变，优化编译的性能

 Vue的<template>语法，就是告诉开发者，用什么样的方式构建视图！！
   + 小胡子语法 {{}}
   + 各种各样的指令 “v-xxx”：内置的有14个，还可以自己自定义指令
     https://v2.cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
 
 v-html/text：把状态信息渲染到某一个容器中
   <div v-html="xxx"></div>
   + 基于小胡子语法渲染信息，如果包含HTML字符串，它是无法识别为HTML标签的，此时需要v-html
   + v-html的原理：类似于原生的innerHTML
   + v-text和小胡子语法会出现相同的情况，因为其等价于原生中的innerText
 */
let vm = new Vue({
    data: {
        title: 'Vue其实很简单的!',
        subTitle: '很多人看vue的官方文档就学会了!',
        str: `<a href="http://www.zhufengpeixun.cn/">珠峰培训</a>`
    }
});
vm.$mount('#app');
console.log(vm);
